<template>
  <div class="todo-header">
    <!-- @keyup.enter="add" 键盘事件 -->
<input type="text" @keyup.enter="add" v-model="title"  placeholder="请输入任务名称，按回车确认" name="" id="">

  </div>
</template>

<script>
// 通过 npm i nanoid 安装，来进行id 的自动排列
import {nanoid} from 'nanoid'
export default {
name:'Top',
data(){
  return{
    title:''
  }
},
methods:{
  // 创建键盘事件
add(){
  // 判断内容是否为空
  if(!this.title) return alert("内容不能为空")
  // conts 获取input 的内容 进行封装 为todo
  const todo={id:nanoid(),title:this.title,done:false}
  // 把todo 传给 addTodo
  // this.addTodo(todo)
  this.$emit('addTodo',todo)//可以不适用propon进行传递数据
  this.title=''
}
},
// props:['addTodo']
}
</script>

<style>
.todo-header input{
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
}
.todo-header input:focus{
    outline: none;
    background-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}
</style>